<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="3">
          <div class="title"><h1>ZT-BLOG</h1></div>
        </el-col>
        <el-col :span="12" :offset="3">
          <div class="nav-btn">
            <el-row>
              <el-col :span="4"
                ><el-button type="text" @click="goMain()"
                  >首页</el-button
                ></el-col
              >
              <el-col :span="4"
                ><el-button type="text" @click="goSort()"
                  >分类</el-button
                ></el-col
              >
              <el-col :span="4"
                ><el-button type="text" @click="goTag()"
                  >标签</el-button
                ></el-col
              >
              <el-col :span="4"
                ><el-button type="text" @click="goTime()"
                  >归档</el-button
                ></el-col
              >
              <el-col :span="4">
                <el-button type="text" @click="goAbus()"
                  >关于我</el-button
                ></el-col
              >
              <el-col :span="4"
                ><el-button type="text" @click="goBehind()"
                  >后台</el-button
                ></el-col
              >
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="nav-search">
            <el-input placeholder="请输入内容" v-model="word">
              <el-button slot="append" icon="el-icon-search" @click="toSearch"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main> 
      <keep-alive v-if="isReloadData">
        <router-view></router-view>
      </keep-alive>
    </el-main>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      word:"",
      isReloadData:true,
    };
  },
  
  methods: {
    reload() {
      this.isReloadData = false;
      this.$nextTick(() => {
        this.isReloadData = true;
      });
    },
    goMain() {
      this.$router.push("/h_main");
    },
    goSort() {
      this.$router.push("/h_sort/1");
    },
    goTag() {
      this.$router.push("/h_tag/1");
    },
    goTime() {
      this.$router.push("/h_time");
    },
    goAbus() {
      this.$router.push("/h_abus");
    },
    goBehind() {
      this.$router.push("/welcome");
    },
    toSearch(){
      window.sessionStorage.setItem("word",this.word)
      this.$router.push("/h_search");
      this.reload();
    }
  },
};
</script>
<style scoped>
.el-container {
  height: 100%;
  background: url(../../assets/bg_index.jpg) no-repeat;
  background-size: 100%;
}
.el-header {
  background-color: #25313f;
}
.el-main {
  background-color: #e9edf1;
}
.title {
  color: white;
  line-height: 60px;
}
.nav-btn {
  line-height: 60px;
}
.nav-btn li {
  display: inline-block;
  padding: 0px 40px;
  list-style: none;
}
.el-button--text {
  color: white;
  font-size: 1.2em;
}
.nav-search {
  line-height: 60px;
}
.el-main {
  background: transparent;
}
</style>